<template>
    <div class="container">
        <div class="first-check-detail">
            <header>
                <router-link to="/">首页 / </router-link>
                <router-link to="/check/firstCheck">初审认证 / </router-link>
                {{detail.companyName}}
            </header>
            <div v-if="messageList.length > 0" class="focus-pointer mb30">
                <div class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="head-info flex-box-align">
                    <span style="margin-right: 60px;">企业名称：{{detail.companyName}}</span>
                    <span class="flex">审核状态：{{detail.auditStatusDesc}}</span>
                    <el-button  type="primary" style="background: #ED7018;border: 1px solid #ED7018" @click="$router.push('/check/firstCheckEdit?id='+id)" >编辑</el-button>
                </div>
                <div class="main-content">
                    <ol>
                        <li>
                            <p>1、公司所从事的业务(产品和服务）</p>
                            <p>
                                {{detail.companyServiceInfo}}
                            </p>
                        </li>
                        <li>
                            <p>2、上一完整年度的营业收入（单位：万元）</p>
                            <p>{{detail.lastYearIncome}}</p>
                        </li>
                        <li>
                            <p>3、上一完整年度是否盈利？</p>
                            <p>{{detail.isLastYearProfit}}</p>
                        </li>
                        <li>
                            <p>4、今年完整年度预计营业收入（单位：万元）</p>
                            <p>{{detail.thisYearPlanIncome}}</p>
                        </li>
                        <li>
                            <p>5、公司的实际控制人户籍所在地？</p>
                            <p>{{detail.masterProvinceName}}{{detail.masterCityName}}</p>
                        </li>
                        <li>
                            <p>6、今年完整年度预计是否盈利？</p>
                            <p>{{detail.isThisYearPlanProfit}}</p>
                        </li>
                        <li>
                            <p>7、目前是否有银行贷款？</p>
                            <p>{{detail.isHasBankCash}}</p>
                        </li>
                        <li>
                            <p>8、是否曾经进行过股权融资？</p>
                            <p>{{detail.isHadFinancing}}</p>
                        </li>
                        <li>
                            <p>9、目前贷款资金需求金额？（单位：万元）</p>
                            <p>{{detail.currentNeedFund}}</p>
                        </li>
                        <li>
                            <p>10、希望贷款资金什么时候到位？</p>
                            <p>{{detail.fundFinishMonthDesc}}</p>
                        </li>
                        <li>
                            <p>11、如果需要，您愿意接受哪些贷款的担保方式？（可多选）</p>
                            <p>{{detail.financingGuaranteeDesc}}</p>
                        </li>
                        <li>
                            <p>12、融资的主要用途</p>
                            <p>{{detail.financingUse}}</p>
                        </li>
                    </ol>
                </div>
                <div style="margin-top: 24px;" v-if="detail.auditStatus == 'init'">
                    <div class="flex-box-container" style="margin-bottom: 30px;">
                        审核结果：
                        <el-radio v-model="auditStatus" :label="item.key" v-for="(item, index) in radiosList" :key="index">{{item.label}}</el-radio>
                    </div>
                    <div class="flex-box-container">
                        <span>审核备注：</span>
                        <el-input
                            type="textarea"
                            :rows="6"
                            placeholder="请输入内容"
                            v-model="memo"
                            style="width: 80%;"
                        >
                        </el-input>
                    </div>
                    <div style="text-align: center;margin-top: 20px;">
                        <el-button  type="primary" style="background: #ED7018;border: 1px solid #ED7018" @click="handleCommit" >提交</el-button>
                    </div>
                </div>
                <div v-else>
                    <div class="flex-box-container" style="margin-top: 30px;margin-bottom: 15px;">
                        审核结果：{{detail.auditStatusDesc}}
                    </div>
                    <div class="" style="margin-bottom: 15px;">
                        审核备注：{{memo}}
                    </div>
                    <div>
                        <el-button  type="primary" style="background: #ED7018;border: 1px solid #ED7018" @click="handleEdit" >编辑</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {parseUrlParams} from "../../util";
    let CONSTANT = require('../../constant/constant.js'),
        common = require('../../common.js');
    export default {
        data() {
            return {
                detail: {},
                radiosList: [
                    {
                        key: "pass",
                        label: "初审通过"
                    },
                    {
                        key: "reject",
                        label: "初审不通过"
                    }
                ],
                auditStatus: "",
                memo: "",
                methodArr:[],
                id: "",
                num: 0,
                messageList: []
            }
        },
        mounted(){
            this.getMessage()
            setInterval( () => {
                this.getMessage()
            }, 120000)
            this.id = parseUrlParams("id")
            this.getDetail()
            this.getMethod()
        },
        methods:{
            getMessage() {
                let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
                common.requestAjax(url, {}, {}, (data) => {
                    if(data.status == 200) {
                        this.messageList = data.data.bussData;
                        this.showMarquee(this.num)
                    }
                })
            },
            getDetail() {
                let url = CONSTANT.URL.CHECK.CHECKDETAIL;
                common.requestAjax(url, JSON.stringify({}), {id: parseUrlParams("id")}, (data) => {
                    if (data.status == 200) {
                        this.detail = data.data.bussData
                        this.auditStatus = this.detail.auditStatus
                        this.memo = this.detail.memo;
                    }
                })
            },
            strReturn(str){
                let arr = str.split(','),
                    arr1 = [];
                    arr.map((item,index)=>{
                        this.methodArr.forEach((list)=>{
                            if(item == list.key){
                                arr1.push(list.value)
                            }
                        })  
                    })
                return arr1.join(',')
            },
            getMethod(){
                let  url = CONSTANT.URL.SYS.LOADDICTIONARY,
                    data = {},
                    dataForm = {codeType:'guarantee_method'}
                    common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.methodArr= res.data.bussData
                    }else{
                    
                    }
                })
            },
            handleCommit() {
                let url = CONSTANT.URL.CHECK.CHECK;
                common.requestAjax(url, JSON.stringify({auditStatus: this.auditStatus, memo: this.memo, id: parseUrlParams("id")}), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        })
                        this.getDetail()
                    }
                })
            },
            handleEdit() {
                this.detail.auditStatus = "init"
            },
            showMarquee:function (num) {
                if (!this.messageList[0]) return
                this.messageList.push(this.messageList[0]);
                var max = this.messageList.length;
                var that = this;
                let marqueetimer =  setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    }
</script>

<style lang="scss">
    .message {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;/*关键样式*/
        overflow: hidden;
    }
    .marquee_list{
        display: block;
        position: absolute;
        top:0;
        left: 0;
    }
    .marquee_top{transition: top 0.5s ;}/*关键样式*/
    .marquee_list li{
        height: 30px;/*关键样式*/
        line-height: 30px;/*关键样式*/
        font-size: 14px;
        padding-left: 20px;
        background-color: #fff;
        a {
            color: #333;
        }
    }
    .container {
        .mb30 {
            margin-bottom: 30px;
        }
        .first-check-detail {
            header {
                margin: 19px 0;
                font-size: 14px;
                color: #333;
                a {
                    color: #999;
                }
            }
            .focus-pointer {
                font-size: 14px;
                height: 70px;
                line-height: 70px;
                background-color: #fff;
                padding-left: 18px;
                white-space: nowrap;
            }
            .content {
                background-color: #fff;
                padding: 30px 20px;
                .head-info {
                    border-bottom: 1px solid #d1d1d1;
                    padding-bottom: 20px;
                }
                .main-content {
                    padding-top: 30px;
                    ol {
                        li {
                            margin-bottom: 28px;
                            &:last-child {
                                margin-bottom: 0;
                                padding-bottom: 30px;
                                border-bottom: 1px solid #d1d1d1;
                            }
                            p {
                                &:last-child {
                                    margin-top: 20px;
                                    padding-left: 23px;
                                }
                            }
                        }
                    }
                }
            }
        }

    }
</style>
